var tableSass = {
    minwidth: 282,

    init: function() {
        this.resizeWidth();
        this.render();
        this.emit();
    },

    render: function() {
        var _this = this;
        $(top.window).resize(function(e) {
            _this.resizeWidth();
        });

        $( ".content-list" ).sortable({
            revert: true,
            handle:'h2'
        }); 

        //渲染列表总订单量、复借订单量、首借订单量、总放款量、复借放款量、首借放款量
        var chstab1 = document.getElementById('chstab1'),
            chstab2 = document.getElementById('chstab2'),
            chstab3 = document.getElementById('chstab3');

        this.setGrawRing(chstab1, 158, 60, 10, 26, 80, ['#ccc', '#44B2FF']);
        this.setGrawRing(chstab2, 158, 60, 10, 52, 378, ['#ccc', '#50DACB']);
        this.setGrawRing(chstab3, 158, 60, 10, 43, 234, ['#ccc', '#8773F3']);
        this.setGrawRing(chstab4, 158, 60, 10, 78, 580, ['#ccc', '#44B2FF']);
        this.setGrawRing(chstab5, 158, 60, 10, 44, 300, ['#ccc', '#50DACB']);
        this.setGrawRing(chstab6, 158, 60, 10, 98, 789, ['#ccc', '#8773F3']);

        //渲染订单类图表
        this.creatEchartsOrder('charts-e1');

        //渲染放款类图表
        this.creatEchartsFk();
    },


    emit: function() {
        var aLink = $('.chart-tab a');
        aLink.on('click', function() {
            aLink.removeClass('active');
            $(this).addClass('active');
        });
    },

    /**
     * 
     * @param { element } parent 圆挂载的元素
     * @param { int } width 圆的宽度
     * @param { int } radius 圆的半径
     * @param { int } arc 圆描边的粗细
     * @param { int } perent 差值
     * @param { int } diff 实际的值
     * @param { Array } color 圆的背景颜色，color[0]: 圆的背景色，color[1]:圆进度条的颜色
     */
    setGrawRing: function (parent, width, radius, arc, perent, diff, color) {
        drawRing({
            parent: parent,
            animated: true,
            width: width,
            radius: radius,
            arc: arc,
            perent: perent,
            diff: diff,
            color: color,
            textColor: '#f30',
            textSize: '16px',
            after: function(){
                console.log('用时');
            }
        });
    },

    creatEchartsOrder: function(id) {
        var myChart = echarts.init(document.getElementById(id));

        var options = {
            legend: {
                data:['总订单量','复借订单量','首借订单量'],
                padding: 0
            },
            grid: {
                x: 20,
                y: 40,
                y2: 25
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : ['0:00','04:00','08:00','12:00','16:00','20:00']
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLine:{
                        show: true
                    }
                }
            ],
            series : [
                {
                    name:'总订单量',
                    type:'bar',
                    data:[678, 263, 632, 452, 325, 243],
                    itemStyle: {
                        normal: {
                            color: '#0396FF'
                        }
                    }
                },
                {
                    name:'复借订单量',
                    type:'bar',
                    data:[126, 89, 326, 231, 218, 87],
                    itemStyle: {
                        normal: {
                            color: '#33CDBD'
                        }
                    }
                },
                {
                    name:'首借订单量',
                    type:'bar',
                    data:[452, 120, 236, 98, 87, 148],
                    itemStyle: {
                        normal: {
                            color: '#7468F0'
                        }
                    }
                }
            ]
        };

        myChart.setOption(options);
    },

    creatEchartsFk: function() {
        var myChart = echarts.init(document.getElementById('charts-e2'));
        var option = {
            legend: {
                data:['总订单量','复借订单量','首借订单量'],
                padding: 0
            },
            grid: {
                x: 20,
                y: 40,
                y2: 25
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : ['0:00','04:00','08:00','12:00','16:00','20:00']
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLine:{
                        show: true
                    }
                }
            ],
            series : [
                {
                    name:'总订单量',
                    type:'bar',
                    data:[678, 263, 632, 452, 325, 243],
                    itemStyle: {
                        normal: {
                            color: '#0396FF'
                        }
                    }
                },
                {
                    name:'复借订单量',
                    type:'bar',
                    data:[126, 89, 326, 231, 218, 87],
                    itemStyle: {
                        normal: {
                            color: '#33CDBD'
                        }
                    }
                },
                {
                    name:'首借订单量',
                    type:'bar',
                    data:[452, 120, 236, 98, 87, 148],
                    itemStyle: {
                        normal: {
                            color: '#7468F0'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    },

    resizeWidth: function(){
        if ($('#main').width() / 3 < this.minwidth) {
            $('.content-item').width(($('#main').width() / 2) - 15);
        } else {
            $('.content-item').width(($('#main').width() / 3) - 15);	
        }		
    }
};

tableSass.init();